<template>
<div>
<van-cell-group>
  <van-cell value="搜索历史">
   <template #right-icon>
    <van-icon name="delete-o" v-if="isShow" @click="isShow = false"/>
  <div v-else>
    <span @click="$emit('removeAll')">全部删除</span>
    &nbsp;&nbsp;
    <span @click="isShow = true">完成</span></div>
  </template>
</van-cell>
</van-cell-group>
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="(item, index) in val" :key="index" :title="item" @click="remove(item,index)">
    <van-icon name="close" v-show="!isShow"/>
  </van-cell>
</van-list>
</div>
</template>

<script>
export default {
  props: {
    val: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isShow: true,
      loading: false,
      finished: false
    }
  },
  methods: {
    remove (item, index) {
      if (this.isShow) {
        this.$emit('search', item)
      } else {
        this.val.splice(index, 1)
      }
    },
    onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (this.val) {
        this.loading = false
      } else {
        this.loading = false
        this.finished = true
      }
    }
  }
}

</script>

<style>

</style>
